<template>
  <main id="main" ref="main" style="width: 100%;height:100%;"></main>
</template>

<script>
const echarts = require("echarts")
export default {
  props: {
    pieData: {
      type: Object,
      default: () => ({
        CountNumber: 0,
        OverrunsNumber: 0,
        SurplusNumber: 0
      })
    },
    pieTitle: {
      type: String,
      default: () => ('')
    },
  },
  data() {
    return {}
  },
  mounted() {
    function fontSize(res){
      let docEl = document.documentElement,
      clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res*fontSize;
    }
    const chart = echarts.init(this.$refs['main'])
    window.onresize = chart.resize;
    const common = {
      name: this.pieTitle + '超支结余分布',
      type: 'pie',
      radius: '70%',
      center: ['50%', '50%'],
      data: [
        {value: this.pieData['OverrunsNumber'], name: '超支' + this.pieTitle},
        {value: this.pieData['SurplusNumber'], name: '结余' + this.pieTitle},
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        normal: {
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}\n{c}个',
            textStyle: {
              color: "#484D78",
              fontSize: fontSize(0.14)
            }
          }
        }
      }
    }
    let inside = JSON.parse(JSON.stringify(common));
    inside.itemStyle.normal.label.position = 'inside';
    inside.itemStyle.normal.label.formatter = '{d}%';
    inside.itemStyle.normal.label.textStyle.color = '#FFFFFF';
    inside.itemStyle.normal.color = (params) => {
      const colorList = [
        '#FF8D49', '#5467E6'
      ];
      return colorList[params.dataIndex]
    };
    common.itemStyle.normal.color = inside.itemStyle.normal.color
    const option = {
      title: {
        show: false
      },
      tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        common,
        inside
      ]
    };
    chart.setOption(option);
  }
}
</script>

<style scoped lang="stylus">

</style>
